import React from 'react'
import { Card,Table,Button,Popconfirm} from 'antd'

let dataSource;

const getSource = () =>{
    let url = 'https://www.304cloud.top:4321/getsourcetxtlist';
        fetch(url)
        .then(res=>res.json())
        .then(res=>{
            dataSource = res.data
        })
}

getSource();

const Txt = (props) => {
    const columns = [
        {
            title:'文字素材id',
            key:'source_word_id',
            width:50,
            align:'center',
            dataIndex:'source_word_id'
        },
        {
            title:'素材内容',
            dataIndex:'source_word_txt',
            align:'left',
            width:400,
        },
        {
            title:'操作',
            width:120,
            align:'center',
            render:(txt,record,index)=>{
                return(
                    <div>
                        {/* <Button type="primary" size="small">修改</Button> */}
                        <Popconfirm title="确定删除此项？" 
                        onCancel={()=>console.log('用户取消删除')} 
                        onConfirm={()=>{
                            console.log('用户确定删除');
                            let del_id = record.source_word_id
                            //此处调用删除api
                            let url = 'https://www.304cloud.top:4321/manadelsourceword';
                            fetch(url,{
                                method:'POST',
                                headers:{
                                    'Content-Type' : 'multipart/form-data'
                                },
                                body:JSON.stringify({'source_word_id':del_id})
                            })
                            .then(res=>{
                                console.log(res)
                                getSource();
                            })
                        }}
                        >
                            <Button style={{margin:"0 0.3rem"}} type="danger" size="small">删除</Button>
                        </Popconfirm>
                       
                    </div>
                )
            }
        },
    ]
    return (
        <Card title="文字素材列表" extra={<Button type="primary" size="small" onClick={()=>props.history.push('/admin/txt/edit')}>
            添加
        </Button>}>
            <Table pagination={{defaultPageSize:6}} columns={columns} bordered dataSource={dataSource}/>
        </Card>
    )
}

export default Txt
